<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--在编译的时候，会去Vue实例中去找变量，而不会去组件的data中，因为在编译的时候，把组件cpn当成是一个DIV了-->
<!--而组件去找变量的时候，只会在自己的变量作用域中去寻找，也就是在组件定义的data中-->
<div id="app">
  <cpn v-show="isShow"></cpn>
</div>


<template id="cpn">
  <div>
    <h2>子组件</h2>
    <p>我是子组件，哈哈哈哈</p>
    <button v-show="isShow">按钮</button>
  </div>
</template>


<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀',
            isShow:true
        },
        components:{
            cpn:{
                template:'#cpn',
                data(){
                    return{
                        isShow:false
                    }
                }
            },
        }
    })
</script>

</body>
</html>